<template>
    <div class="home_Coll">
        <PostItem v-for="(post,index) in blogs" :key="index" :post="post" :greatDic="getGreat(post['_id'])"/>
    </div>
</template>

<script>
import PostItem from '../PostItem'
export default {
    name:'Home',
    components:{
        PostItem,
    },
    props:['userLogin','userChoosed'],
    data(){
        return {
            blogs:[],
            greatArr:[],
        }
    },
    computed:{
        getGreat:function(value){
            return function (value){
                // console.log(value)
                if(this.greatArr.indexOf(value)>=0){
                    return true;
                }
                else{
                    return false;
                }
            }
        }
    },
    methods: {
        getColl(userId){
            this.$axios.post('/api/colls/getUserColls')
            .then(res=>{
                console.log(res.data.data);
                this.blogs=res.data.data; 
            })
        }
    },
    watch:{
        userChoosed:function(){
            this.getColl(this.userChoosed.id);
        }
    },
    created(){
        if(this.userChoosed.id){
            this.getColl(this.userChoosed.id);
        }
        this.$axios.post('/api/greats/getGreats')
        .then(res=>{
            if(res.data.ok==0){
                for(let i=0;i<res.data.data.length;i++){
                    this.greatArr.push(String(res.data.data[i].post));
                }
            }
            else{
                console.log("err")
            }
        });
    }
}
</script>

<style scoped>
.home_Coll{
    width:100%;
    /* height:100px; */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.04);
    border:1px solid #ccc;
    padding:5px 5px 10px 5px;
    box-sizing: border-box;
}

</style>

